// window.addEventListener('load', function () {
//     // 1.获取元素
//     var focus = document.querySelector('.focus')
//     var ul = focus.children[0]
//     var ol = focus.children[1]
//     var w = focus.offsetWidth
//     var index = 0
//     // 2.定时器 利用c3属性2d移动transform里的translateX属性达到位移 类似动画的效果
//     var timer = setInterval(function () {
//         index++
//         var translatex = -index * w
//         ul.style.transform = 'translateX(' + translatex + 'px)'
//         // 轮播位移过快 添加过渡更加平滑 也是cs新增属性 transition 
//         ul.style.transition = 'all  .3s'
//     }, 2000)
//     // 3.无缝滚动 跟pc端一致只不过是写在新的监听事件：监听过渡完成才会执行该事件
//     ul.addEventListener('transitionend', function () {
//         // index 对应图length
//         if (index >= 3) {
//             index = 0
//             ul.style.transition = 'none'
//             var translatex = -index * w
//             ul.style.transform = 'translateX(' + translatex + 'px)'
//         }
//         if (index < 0) {
//             index = 2
//             ul.style.transition = 'none'
//             var translatex = -index * w
//             ul.style.transform = 'translateX(' + translatex + 'px)'
//         }
//         // 4.先获取到要移除的元素类名 然后在移除 最后在把类添加到当前元素
//         ol.querySelector('.current').classList.remove('current')
//         ol.children[index].classList.add('current')

//     })

//     // 5.手指滑动轮播图 
//     // (1)手指移动后的距离 - 初始手指触摸位置 = 移动距离
//     // (2)盒子原来的位置 + 算好的移动距离// 注意不是盒子width 是位置
//     var startX = 0
//     var moveX = 0
//     ul.addEventListener('touchstart', function (e) {
//         startX = e.targetTouches[0].pageX
//         clearInterval(timer)
//     })

//     ul.addEventListener('touchmove', function (e) {
//         moveX = e.targetTouches[0].pageX - startX
//         var translatex = -index * w + moveX
//         ul.style.transition = 'none'
//         ul.style.transform = 'translateX(' + translatex + 'px)'


//     })

//     ul.addEventListener('touchend', function () {
//         if (Math.abs(moveX) > 50) {
//             if (moveX > 0) {//左滑是正值
//                 index--
//             } else {
//                 index++
//             }
//             var translatex = -index * w
//             ul.transition = 'all .3s'
//             ul.style.transform = 'translateX(' + translatex + 'px)'
//         } else {
//             var translatex = -index * w
//             ul.transition = 'all .1s'
//             ul.style.transform = 'translateX(' + translatex + 'px)'
//         }

//         clearInterval(timer)
//         timer = setInterval(function () {
//             index++
//             var translatex = -index * w
//             ul.style.transform = 'translateX(' + translatex + 'px)'
//             ul.style.transition = 'all  .3s'
//         }, 2000)
//     })
// })




window.addEventListener('load', function() {
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var w = focus.offsetWidth;
    var ol = focus.children[1];
    var index = 0;
    var timer = setInterval(function() {
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000);
    ul.addEventListener('transitionend', function() {
        if (index >= 3) {
            index = 0;
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            index = 2;
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
    });
    var startX = 0;
    var moveX = 0; 
    var flag = false;
    ul.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX;
        clearInterval(timer);
    });
    ul.addEventListener('touchmove', function(e) {
        moveX = e.targetTouches[0].pageX - startX; 
        var translatex = -index * w + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        flag = true; 
        e.preventDefault(); 
    });
    ul.addEventListener('touchend', function(e) {
        if (flag) {
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                var translatex = -index * w;
                ul.style.transition = 'all .1s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
    });


//     // 返回顶部模块制作
//     var goBack = document.querySelector('.goBack');
//     var nav = document.querySelector('nav');
//     window.addEventListener('scroll', function() {
//         if (window.pageYOffset >= nav.offsetTop) {
//             goBack.style.display = 'block';
//         } else {
//             goBack.style.display = 'none';
//         }
//     });
//     goBack.addEventListener('click', function() {
//         window.scroll(0, 0);
//     })
 })